<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>请假系统-申请请假-步骤模式</title>
	<link rel="stylesheet" href="vendor/weui/1.1.3/weui.min.css">
	<link rel="stylesheet" href="vendor/jquery-weui-1.2.1/jquery-weui.min.css">
	<link rel="stylesheet" href="assets/css/weui-my.css">
	
	<style>
	</style>
</head>
<body>
	<div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>

	<div class="container" id="container">
		<div class="page searchbar js_show">
			<div class="page__hd banner-bg">
				<h1 class="page__title">添加假条-步骤模式</h1>
				<!-- <p class="page__desc">考勤系统</p> -->
			</div>
			
			<div class="weui-cells__title">
				<p>申请类型</p>
			</div>
			<div class="weui-cells weui-cells_form">
				<a class="weui-cell weui-cell_access" href="javascript: void(0);">
					<div class="weui-cell__hd"><label class="weui-label">请假类别</label></div>
					<div class="weui-cell__bd">
						<input type="text" class="weui-input fake-leaveType" placeholder="请点击选择类别" readonly />
						<input type="hidden" class="weui-input" name="leaveType" />
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript: void(0);" onclick="selectAppliUuid();">
					<div class="weui-cell__hd"><label class="weui-label">申请类别</label></div>
					<div class="weui-cell__bd">
						<!-- <input type="text" class="weui-input fake-appliUuid" placeholder="请点击选择类别" readonly /> -->
						<input type="hidden" class="weui-input" name="appliUuid" />
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
			
			<div class="weui-cells__title">
				<p>快捷步骤(正式情况下隐藏)</p>
			</div>
			<div class="weui-cells weui-cells_form">
				<a class="weui-cell weui-cell_access" href="javascript: void(0);">
					<!-- <div class="weui-cell__hd"><label class="weui-label"></label></div> -->
					<div class="weui-cell__bd">
						<input type="text" class="weui-input quick-steps" placeholder="快捷步骤" readonly />
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
			
			<div class="weui-cells__title">
				<p>时间范围</p>
			</div>
			<div class="weui-cells weui-cells_form">
				<a class="weui-cell weui-cell_access" href="javascript: void(0);">
					<div class="weui-cell__hd"><label class="weui-label">开始时间</label></div>
					<div class="weui-cell__bd">
						<input type="text" class="weui-input" name="startTime" placeholder="请点击选择开始时间" />
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript: void(0);">
					<div class="weui-cell__hd"><label class="weui-label">结束时间</label></div>
					<div class="weui-cell__bd">
						<input type="text" class="weui-input" name="endTime" placeholder="请点击选择结束时间" />
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">小时数</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" name="hours" placeholder="完成以上几项,自动计算" readonly />
					</div>
				</div>
					
			</div>
				
			<div class="weui-cells__title">
				<p>请假详情</p>
			</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
						<div class="weui-textarea-counter"><span>0</span>/200</div>
					</div>
				</div>
			</div>
			
			<div class="weui-cells no-line">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<a href="javascript: void(0);" id="submit" class="weui-btn weui-btn_primary">预览并提交请假</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- <script src="vendor/weuijs/1.1.4/weui.fixed.js"></script> -->
	<script src="vendor/jquery/jquery-3.3.1.min.js"></script>
	<script src="vendor/jquery-weui-1.2.1/jquery-weui.js"></script>
	<script src="assets/js/common.js"></script>
	
	<script>
		let stepMode = true;	// 确保每步只自动触发一次
		
		let yearsAllow = [];
		let now = new Date();
		let nowYear = now.getFullYear();
		for (let i = -1; i <= 1; i++) {
			yearsAllow.push(nowYear + i);
		}
		
		var formatNumber = function (n) {
			return n < 10 ? "0" + n : n;
		}
		
		// 开始时间-初始化
		$('input[name=startTime]').datetimePicker({
			years: yearsAllow,
			times: function () {
				return [  // 自定义的时间
					{
						values: (function () {
							var hours = [];
							for (var i=0; i<24; i++) hours.push(formatNumber(i));
							return hours;
						})()
					},
					{
						divider: true,  // 这是一个分隔符
						content: ':'
					},
					{
						values: (function () {
							var minutes = ['00', '30'];
							// for (var i=0; i<60; i++) minutes.push(formatNumber(i));
							return minutes;
						})()
					}
				];
			},
			onOpen: function(pickerInstance, b, c, d) {
				console.log('opend', pickerInstance, b, c, d);
				// pickerInstance.open();
				// $('input[name=startTime]').trigger('change');
			},
			onClose: function(a, b, c, d) {
				if (stepMode) {
					requestAnimationFrame(function() {
						$('input[name=endTime]').trigger('click');
					});
				}
				console.log(a, b, c, d)
			},
			onChange: function (pickerInstance, values) {
				console.log('change', pickerInstance, values);
				calculateHours();
			}
		});
		
		// 结束时间-初始化
		$('input[name=endTime]').datetimePicker({
			years: yearsAllow,
			times: function () {
				return [  // 自定义的时间
					{
						values: (function () {
							var hours = [];
							for (var i=0; i<24; i++) hours.push(formatNumber(i));
							return hours;
						})()
					},
					{
						divider: true,  // 这是一个分隔符
						content: ':'
					},
					{
						values: (function () {
							var minutes = ['00', '30'];
							// for (var i=0; i<60; i++) minutes.push(formatNumber(i));
							return minutes;
						})()
					}
				];
			},
			onClose: function() {
				if (stepMode) {
					requestAnimationFrame(function() {
						$.alert('<strong>目标：便捷操作</strong><br/>1.请假<br/>2.倒休<br/>3.日期<br/>(日期单独选择，使用日期选择器，提供快选项。<br/>快捷项: 请一天，请上午，请下午，取消)<br/>4.时间(修改或确定)<br/>5.理由(提供快捷项)');
					});
				}
			},
			onChange: function (pickerInstance, values) {
				console.log('change', pickerInstance, values);
				calculateHours();
				stepMode = false;
			}
		});
		
		function _getDate(datetimeStr) {
			let dtArr = [];
			let _p1 = datetimeStr.split(' ');
			dtArr = [... _p1[0].split('-'), ... _p1[1].split(':')];
			dtArr[1] = dtArr[1] - 1;	// 对于月份的特殊处理 0==一月;11==十二月
			return new Date(... dtArr);
		}
		
		function getState(h) {
			if (h < 12) {
				return 'am'
			}
		}
		
		// 小时数计算
		function calculateHours() {
			requestAnimationFrame(function() {
				let lt = $('input[name=leaveType]').val();
				let au = $('input[name=appliUuid]').val();
				let st = $('input[name=startTime]').val();
				let ed = $('input[name=endTime]').val();
				let hours = -1;
				
				// TODO: 请提供算法 or 使用后台计算, 以下为demo
				if (lt && au && st && ed) {
					console.log('计算小时数 data:', lt, au, st, ed);
					let dateSt = _getDate(st);
					let dateEd = _getDate(ed);
					
					// 请假 精确到1h
					if (lt === "1") {
						let _hst, _hed;
						_hst = dateSt.getHours();
						_hed = dateEd.getHours();
						if (dateEd.getMinutes() > 0) {
							_hed += 1;
						}
						hours = _hed - _hst;
						if (_hed > 12 && _hst < 12) {
							hours -= 1;
						}
					}
					
					$('input[name=hours]').val(hours);
				}
				
				console.log('>>>' + (!!lt && !!au && !!st && !!ed) + '<<<', lt, au, st, ed);
			});
		}
		
		let leaveCascade = [{
			label: '请假',
			value: 1,
			children: [{
					label: '年假',
					value: 1
				}, {
					label: '病假',
					value: 2
				}, {
					label: '产检假',
					value: 24
				}, {
					label: '陪产假',
					value: 25
				}, {
					label: '倒休',
					value: 3
				}, {
					label: '事假',
					value: 4
				}, {
					label: '婚假',
					value: 5
				}, {
					label: '产假',
					value: 6
				}, {
					label: '丧假',
					value: 7
				}
			]
		}, {
			label: '加班',
			value: 2,
			children: [
				{
					label: '存休',
					value: 9
				}, {
					label: '加班费',
					value: 11
				}
			]
		}, {
			label: '外出',
			value: 3,
			children: [
				{
					label: '上班不能按时打卡',
					value: 10
				}, {
					label: '下班不能按时打卡',
					value: 16
				}, {
					label: '都不能按时打卡',
					value: 17
				}
			]
		}];
		
		let leaveType_valueMap = {};			// 请假类别_显示值=>实际值
		let leaveType_displayValues = [];		// 请假类别_显示值列表
		let appliUuid_valueMap = {};			// 申请类别_显示值=>实际值
		let appliUuid_displayValuesMap = {};	// 申请类别_请假类别实际值=>申请类显示值待选项列表
		
		// 初始化请假类别、申请类别的数据
		leaveType_displayValues = leaveCascade.map((ltItem) => {
			leaveType_valueMap[ltItem.label] = ltItem.value;
			appliUuid_displayValuesMap[ltItem.value] = ltItem.children.map((auItem) => {
				appliUuid_valueMap[auItem.label] = auItem.value;
				return auItem.label
			});
			return ltItem.label
		});
		console.log('leaveType =>', leaveType_displayValues, leaveType_valueMap);
		console.log('appliUuid =>', appliUuid_displayValuesMap, appliUuid_valueMap);
		
		// 请假类别、申请类别 初始化
		let $leaveType = $('input[name=leaveType]');
		$('.fake-leaveType').picker({
			cols: [{
				textAlign: 'center',
				values: leaveType_displayValues
			}],
			onClose: function() {
				if (stepMode) {
					requestAnimationFrame(function() {
						$('.fake-appliUuid').trigger('click');
					});
				}
			},
			onChange: function (pickerInstance, values) {
				// 每次显示值更新,同步修改实际值
				$leaveType.val(leaveType_valueMap[values[0]]);
				calculateHours();
				
				// 每次请假类别改变选项,都要销毁原申请类别对象,重新初始化,待选项值由请假类别实际值决定
				$('.fake-appliUuid').remove();
				$appliUuid.before('<input type="text" class="weui-input fake-appliUuid" placeholder="请点击选择类别" readonly />');
				$('.fake-appliUuid').picker({
					cols: [{
						textAlign: 'center',
						values: appliUuid_displayValuesMap[$leaveType.val()]
					}],
					onClose: function() {
						if (stepMode) {
							requestAnimationFrame(function() {
								$('input[name=startTime]').trigger('click');
							});
						}
					},
					onChange: function (pickerInstance, values) {
						$appliUuid.val(appliUuid_valueMap[values[0]]);
						calculateHours();
					}
				});
			}
		});
		
		// 申请类别
		let $appliUuid = $('input[name=appliUuid]');
		
		function selectAppliUuid() {
			if (!$leaveType.val()) {
				$.notification({
					title: "提示",
					text: "请先选择“请假类别”!"/* ,
					media: "<img src='assets/images/icon_tabbar.png'>",
					data: "123",
					onClick: function(data) {
						$.alert("Click" + data);
					},
					onClose: function(data) {
						$.alert("Close "+data);
					} */
				});
			}
		}
	
		$(function() {
			requestAnimationFrame(function() {
				$('.fake-leaveType').trigger('click');
			});
		})
	</script>
</body>
</html>


